<template>
  <v-card class="profile-card" elevation="4">
    <!-- 头像区域 -->
    <div class="profile-header text-center pa-4">
      <v-avatar size="80" class="mb-3">
        <v-img :src="profileData.avatar" :alt="profileData.name" cover>
          <template v-slot:placeholder>
            <v-icon size="40" color="primary">mdi-account</v-icon>
          </template>
        </v-img>
      </v-avatar>

      <!-- 姓名和描述 -->
      <h2 class="text-h5 font-weight-bold mb-1">{{ profileData.name }}</h2>
      <p class="text-body-2 text-grey-lighten-1 mb-1">{{ profileData.subtitle }}</p>
      <p class="text-caption text-grey-lighten-2">{{ profileData.location }}</p>
    </div>

    <!-- 统计信息 -->
    <v-divider></v-divider>
    <div class="stats-section pa-4">
      <v-row no-gutters class="text-center">
        <v-col cols="4">
          <div class="stat-item">
            <div class="text-h6 font-weight-bold">{{ profileData.stats.articles }}</div>
            <div class="text-caption text-grey-lighten-1">文章</div>
          </div>
        </v-col>
        <v-col cols="4">
          <div class="stat-item">
            <div class="text-h6 font-weight-bold">{{ profileData.stats.categories }}</div>
            <div class="text-caption text-grey-lighten-1">分类</div>
          </div>
        </v-col>
        <v-col cols="4">
          <div class="stat-item">
            <div class="text-h6 font-weight-bold">{{ profileData.stats.tags }}</div>
            <div class="text-caption text-grey-lighten-1">标签</div>
          </div>
        </v-col>
      </v-row>
    </div>

    <!-- GitHub 按钮 -->
    <v-divider></v-divider>
    <div class="pa-4">
      <v-btn
        :href="profileData.githubUrl"
        target="_blank"
        color="primary"
        variant="elevated"
        block
        class="mb-3"
        prepend-icon="mdi-github"
      >
        GitHub
      </v-btn>

      <!-- 社交媒体图标 -->
      <div class="social-icons d-flex justify-center gap-2">
        <v-btn
          v-for="social in profileData.socialLinks"
          :key="social.name"
          :href="social.url"
          target="_blank"
          :icon="social.icon"
          size="small"
          variant="text"
          color="grey-lighten-1"
        ></v-btn>
      </div>
    </div>

    <!-- 微信搜索区域 -->
    <v-divider></v-divider>
    <div class="wechat-section pa-4 text-center">
      <h4 class="text-subtitle-2 mb-3">微信搜一搜</h4>
      <div class="qr-code mb-3">
        <v-img
          :src="profileData.wechatQR"
          width="120"
          height="120"
          class="mx-auto"
          style="border-radius: 8px"
        >
          <template v-slot:placeholder>
            <div class="d-flex align-center justify-center fill-height">
              <v-icon size="40" color="grey">mdi-qrcode</v-icon>
            </div>
          </template>
        </v-img>
      </div>
      <v-text-field
        v-model="profileData.wechatSearch"
        density="compact"
        variant="outlined"
        readonly
        hide-details
        class="wechat-search"
      ></v-text-field>
    </div>

    <!-- 归档区域 -->
    <v-divider></v-divider>
    <div class="archive-section pa-4">
      <h4 class="text-subtitle-2 mb-3">归档</h4>
      <div class="archive-list">
        <div
          v-for="archive in profileData.archives"
          :key="archive.year"
          class="archive-item d-flex justify-space-between align-center py-2"
        >
          <span class="text-body-2">{{ archive.year }}</span>
          <v-chip size="small" variant="tonal" color="primary">
            {{ archive.count }}
          </v-chip>
        </div>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 个人信息数据
const profileData = ref({
  name: 'iMaeGoo',
  subtitle: '虹墨空间站',
  location: 'Zhengzhou, China',
  avatar: 'https://picsum.photos/80/80?random=avatar',
  stats: {
    articles: 245,
    categories: 12,
    tags: 45
  },
  githubUrl: 'https://github.com/iMaeGoo',
  socialLinks: [
    { name: 'video', icon: 'mdi-video', url: '#' },
    { name: 'bell', icon: 'mdi-bell', url: '#' },
    { name: 'envelope', icon: 'mdi-email', url: '#' },
    { name: 'rss', icon: 'mdi-rss', url: '#' }
  ],
  wechatQR: 'https://picsum.photos/120/120?random=qr',
  wechatSearch: 'Q 虹墨iMaeGoo',
  archives: [
    { year: 2025, count: 13 },
    { year: 2024, count: 24 },
    { year: 2023, count: 13 },
    { year: 2022, count: 9 },
    { year: 2021, count: 16 },
    { year: 2020, count: 33 },
    { year: 2019, count: 35 },
    { year: 2018, count: 6 }
  ]
})
</script>

<style scoped>
.profile-card {
  width: 100%;
  /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); */
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  bottom: 0;
}

/* .profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
} */

.profile-header {
  position: relative;
  z-index: 1;
}

.stats-section {
  position: relative;
  z-index: 1;
}

.stat-item {
  padding: 8px 0;
}

.social-icons {
  gap: 8px;
}

.wechat-section {
  position: relative;
  z-index: 1;
}

.wechat-search {
  max-width: 200px;
}

.archive-section {
  position: relative;
  z-index: 1;
}

.archive-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}

.archive-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.archive-item:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 960px) {
  .profile-card {
    margin-bottom: 24px;
  }
}

@media (max-width: 600px) {
  .profile-header {
    padding: 16px;
  }

  .stats-section,
  .wechat-section,
  .archive-section {
    padding: 16px;
  }

  .wechat-search {
    max-width: 100%;
  }
}
</style>
